<template>
    <div class="about">
      <h1>个人简介</h1>
      <div class="profile">
        <div class="avatar-container">
          <img src="https://codelover.club/coursefiles/images/film/汽车.jpeg" alt="头像" class="avatar">
        </div>
        <div class="bio">
          <h2>张三</h2>
          <p>前端开发工程师</p>
          <p>热爱编程，喜欢学习新技术，专注于Vue和React开发。</p>
          <p>有5年Web开发经验，参与过多个大型项目的开发。</p>
          <p>业余时间喜欢阅读、旅行和摄影。</p>
        </div>
      </div>
      <div class="skills">
        <h3>技术栈</h3>
        <ul>
          <li>Vue.js / React</li>
          <li>JavaScript / TypeScript</li>
          <li>HTML5 / CSS3</li>
          <li>Node.js</li>
          <li>Git</li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'AboutPage'
  }
  </script>
  
  <style scoped>
  .about {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .profile {
    display: flex;
    align-items: center;
    margin: 30px 0;
  }
  
  .avatar-container {
    margin-right: 30px;
  }
  
  .avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #42b983;
  }
  
  .bio h2 {
    color: #42b983;
    margin-bottom: 10px;
  }
  
  .bio p {
    margin: 5px 0;
    line-height: 1.6;
  }
  
  .skills {
    margin-top: 30px;
    text-align: left;
  }
  
  .skills h3 {
    color: #42b983;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
  }
  
  .skills ul {
    list-style-type: none;
    padding: 0;
  }
  
  .skills li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
  }
  </style>